<template>
	<view class="page">
    <view class="page-header"></view>
    <view class="card top-rank-wrapper">
      <view class="page-title">您打败了XX市XX区70%的用户</view>
      <view class="top-rank">
        <view style="display: flex;align-items: center">
          <view class="top-rank-left">
            <view class="rank-box-chart" id="rankBox">
            </view>
            <view class="rankChart-desc">
              <view class="rankChart-name">三级甲等</view>
              <view class="rankChart-value">
                <view class="value">90</view>
                <view class="unit">分</view>
              </view>
              <view class="rankChart-text">2小时前更新</view>
            </view>
          </view>
          <view class="top-rank-right">
            <view class="top-rank-item">
              <view class="top-rank-name-wrapper">
                <img src="/static/rank1.png" alt="">
                <span>xxx市第<span class="high-light-text">88</span>名</span>
              </view>
              <view class="top-rank-bar">
                <view class="top-rank-bar-content"  style="width: 60%"></view>
              </view>
            </view>
            <view class="top-rank-item" >
              <view class="top-rank-name-wrapper">
                <img src="/static/rank1.png" alt="">
                <span>xxx市第<span class="high-light-text">88</span>名</span>
              </view>
              <view class="top-rank-bar">
                <view class="top-rank-bar-content" style="width: 80%"></view>
              </view>
            </view>
          </view>
        </view>
        <view style="display: flex;justify-content: center">
          <view class="to-button" style="margin-top: 12px;margin-bottom: 8px;width: 70%">立即测试</view>
        </view>
      </view>
    </view>
    <view class="card rank-wrapper">
      <view class="rank-box left">
        <view class="rank-title">XX市排行榜</view>
        <view class="rank-table">
          <view class="rank-table-header">
            <view class="rank-table-cell cell1">排名</view>
            <view class="rank-table-cell cell2">呢称</view>
            <view class="rank-table-cell cell3">分数</view>
          </view>
          <view class="rank-table-list">
            <view class="rank-table-body" v-for="(item,index) in 10">
              <view class="rank-table-cell cell1 row-cell1">{{ index + 1}}</view>
              <view class="rank-table-cell cell2 row-cell2">
                <view class="avatar">
                  <img src="/static/avatar.png" alt="">
                </view>
                <view>
                  用户昵称
                </view>
              </view>
              <view class="rank-table-cell cell3 row-cell3">
                200
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="rank-box right">
        <view class="rank-title">XX区排行榜</view>
        <view class="rank-table">
          <view class="rank-table-header">
            <view class="rank-table-cell cell1">排名</view>
            <view class="rank-table-cell cell2">呢称</view>
            <view class="rank-table-cell cell3">分数</view>
          </view>
          <view class="rank-table-list">
            <view class="rank-table-body" v-for="(item,index) in 10">
            <view class="rank-table-cell cell1 row-cell1">{{ index + 1}}</view>
            <view class="rank-table-cell cell2 row-cell2">
              <view class="avatar">
                <img src="/static/avatar.png" alt="">
              </view>
              <view>
                用户昵称
              </view>
            </view>
            <view class="rank-table-cell cell3 row-cell3">
              200
            </view>
          </view>
          </view>
        </view>
      </view>
    </view>

    <view class="card static-top-wrapper">
      <view style="display: flex;align-items: center;justify-content: space-between">
        <view class="rank-title">
          <img src="/static/时间.png" alt="">
          <span>发音分数预览</span>
        </view>
        <span class="rank-desc">更新时间: 2天前</span>
      </view>
      <view class="static-box">
        <view class="static-item">
          <view class="charts-box" id="chartsBox1" ></view>
          <view class="static-desc">
            <view class="static-title">平翘舌</view>
          </view>
        </view>
        <view class="static-item">
          <view class="charts-box" id="chartsBox2" ></view>
          <view class="static-desc">
            <view class="static-title">前后鼻音</view>
          </view>
        </view>
        <view class="static-item">
          <view class="charts-box" id="chartsBox3" ></view>
          <view class="static-desc">
            <view class="static-title">声调</view>
          </view>
        </view>

        <view class="static-item">
          <view class="charts-box" id="chartsBox11" ></view>
          <view class="static-desc">
            <view class="static-title">nl/hf</view>
          </view>
        </view>
        <view class="static-item">
          <view class="charts-box" id="chartsBox22" ></view>
          <view class="static-desc">
            <view class="static-title">jqx</view>
          </view>
        </view>
        <view class="static-item">
          <view class="charts-box" id="chartsBox33" ></view>
          <view class="static-desc">
            <view class="static-title">其他</view>
          </view>
        </view>
      </view>
    </view>
    <view style="display: flex;justify-content: space-between">
      <view style="flex: 1;padding: 0 6px">
        <view class="static-bottom-wrapper">
          <view class="static-bottom-header">
            <view class="rank-title">
              <img src="/static/网商银行无线端_错误.png" alt="">
              常错字词</view>
            <view class="rank-desc">53个</view>
          </view>
          <view class="static-bottom-chart" id="chartsBox4"></view>
        </view>
      </view>
      <view style="flex: 1;padding: 0 6px">
        <view class="static-bottom-wrapper">
        <view class="static-bottom-header">
          <view class="rank-title">
            <img style="width: 26px" src="/static/运动记录.png" alt="">
            测试记录</view>
          <view class="rank-desc">4次</view>
        </view>
        <view class="static-bottom-chart" id="chartsBox5"></view>
      </view>
      </view>
    </view>
    <view class="card item-desc">
      <img class="logo" src="/static/logo.png" alt="">
      <view class="item-desc-content">
        <view class="item-desc-name">考试介绍</view>
        <view class="item-desc-desc">普通话水平测试中50个生僻字</view>
      </view>
      <img class="arrow" src="/static/arrow.png" alt="">
    </view>

    <view class="card asign">
      <view class="asign-header">
        <view class="asign-title">
          <img src="/static/统计分析.png" alt="">
          音量语速分析</view>
        <view class="asign-desc">
          <img  src="/static/sound.png" alt="">
          老师示范
        </view>
      </view>
      <view class="asign-body">
        <view class="asign-wrapper">
          <view class="asign-box">
            <view class="asign-box-title">音量</view>
            <view class="asign-bar-box">
              <view class="asign-bar-name">单音节</view>
              <view class="asign-bar-content">
                <view
                    style="width: 90%;"
                    class="asign-bar-item linear-red">偏快</view>
              </view>
            </view>
            <view class="asign-bar-box">
              <view class="asign-bar-name">多音节</view>
              <view class="asign-bar-content">
                <view
                    style="width: 90%;"
                    class="asign-bar-item linear-red">偏快</view>
              </view>
            </view>
            <view class="asign-bar-box">
              <view class="asign-bar-name">短文朗读</view>
              <view class="asign-bar-content">
                <view
                    style="width: 90%;"
                    class="asign-bar-item linear-red">偏快</view>
              </view>
            </view>

            <view class="asign-tips">
              请注意，您的整体语速偏
              快噢。会影响您的吐字归
              音，会导致评分过低。请
              及时调整语速，平缓适中
              即可。
            </view>
          </view>
        </view>
        <view class="asign-wrapper">
          <view class="asign-box">
            <view class="asign-box-title">语速</view>
            <view class="asign-bar-box">
              <view class="asign-bar-name">单音节</view>
              <view class="asign-bar-content">
                <view
                    style="width: 90%;"
                    class="asign-bar-item linear-green">偏快</view>
              </view>
            </view>
            <view class="asign-bar-box">
              <view class="asign-bar-name">多音节</view>
              <view class="asign-bar-content">
                <view
                    style="width: 90%;"
                    class="asign-bar-item linear-green">偏快</view>
              </view>
            </view>
            <view class="asign-bar-box">
              <view class="asign-bar-name">短文朗读</view>
              <view class="asign-bar-content">
                <view
                    style="width: 90%;"
                    class="asign-bar-item linear-green">偏快</view>
              </view>
            </view>
            <view class="asign-tips">
              请注意，您的音量呈现忽
              高忽低的现象。请仔细检
              查麦克风，调整固定好麦
              克风与嘴巴距离后不要拨
              弄;声音需清晰稳定，说
              话不要忽高忽低。
            </view>
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
import * as echarts from "../../static/echarts.min";
	export default {
		data() {
			return {

			}
		},
    mounted() {
      this.initCharts()
    },
		methods: {
      initCharts() {

        const chartDom10 = document.getElementById('rankBox');
        const myChart10 = echarts.init(chartDom10);
        let option10 = {
          series: [
            {
              name: '总分',
              type: "pie",
              clockWise: false,
              radius: ['85%', '100%'],
              center: ['50%', "50%"],
              itemStyle: {
                normal: {
                  color: '#f80c2f',
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                },
              },
              hoverAnimation: false,
              data: [
                {
                  value: 90,
                },
                {
                  value: 100 - 90,
                  name: "invisible",
                  itemStyle: {
                    normal: {
                      color: '#ffdcc3',
                    },
                    emphasis: {
                      color: '#ffdcc3'
                    },
                  },
                },
              ],
            }
          ]
        };
        myChart10.setOption(option10);

        function getPieOption(value,name) {
          return {
            backgroundColor: "#fff",
            title: {
              text: value,
              left: "48%",
              top: "38%",
              textAlign: "center",
              textStyle: {
                fontWeight: "normal",
                fontSize: "14",
                color: "#666",
                textAlign: "center",
              },
            },
            series: [
              {
                name:  name,
                type: "pie",
                clockWise: false,
                radius: ['65%', '85%'],
                center: ['50%', "50%"],
                itemStyle: {
                  normal: {
                    color: '#f80c2f',
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
                hoverAnimation: false,
                data: [
                  {
                    value: value,
                  },
                  {
                    value: 100 - value,
                    name: "invisible",
                    itemStyle: {
                      normal: {
                        color: '#ffdcc3',
                      },
                      emphasis: {
                        color: '#ffdcc3'
                      },
                    },
                  },
                ],
              }
            ]
          };
        }
        const chartDom1 = document.getElementById('chartsBox1');
        const myChart1 = echarts.init(chartDom1);
        let option1 = getPieOption(24.1, '平翘舌')
        myChart1.setOption(option1);

        const chartDom2 = document.getElementById('chartsBox2');
        const myChart2 = echarts.init(chartDom2);
        let option2 = getPieOption(24.1, '前后鼻音')
        myChart2.setOption(option2);

        const chartDom3 = document.getElementById('chartsBox3');
        const myChart3 = echarts.init(chartDom3);
        let option3 = getPieOption(24.1, '声调')
        myChart3.setOption(option3);


        const chartDom11 = document.getElementById('chartsBox11');
        const myChart11 = echarts.init(chartDom11);
        let option11 = getPieOption(24.1, 'nl/hf')
        myChart11.setOption(option11);

        const chartDom22 = document.getElementById('chartsBox22');
        const myChart22 = echarts.init(chartDom22);
        let option22 = getPieOption(24.1, 'jpx')
        myChart22.setOption(option22);

        const chartDom33 = document.getElementById('chartsBox33');
        const myChart33 = echarts.init(chartDom33);
        let option33 = getPieOption(24.1, '其他')
        myChart33.setOption(option33);

        const chartDom4 = document.getElementById('chartsBox4');
        const myChart4 = echarts.init(chartDom4);
        let colorList = [
          "#73DDFF",
          "#73ACFF",
          "#FDD56A",
          "#FDB36A",
          "#FD866A",
          "#9E87FF",
          "#58D5FF",
        ];
        let option4 = {
          title: {
            text: "53",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: 20,
            },
          },
          tooltip: {
            trigger: "item",
          },
          series: [
            {
              type: "pie",
              center: ["50%", "50%"],
              radius: ["55%", "85%"],
              clockwise: true,
              avoidLabelOverlap: true,
              hoverOffset: 15,
              itemStyle: {
                normal: {
                  color: function (params) {
                    return colorList[params.dataIndex];
                  },
                },
              },
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  name: "一月",
                  value: 1.45,
                },
                {
                  name: "二月",
                  value: 2.93,
                },
                {
                  name: "三月",
                  value: 3.15,
                },
                {
                  name: "四月",
                  value: 4.78,
                },
                {
                  name: "五月",
                  value: 5.93,
                },
                {
                  name: "六月",
                  value: 5.73,
                },
              ],
            },
          ],
        };

        myChart4.setOption(option4);


        const chartDom5 = document.getElementById('chartsBox5');
        const myChart5 = echarts.init(chartDom5);
        let option5 = {
          grid: {
            top: 25,
            bottom: 14,
            right:0,
            left:10,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              show: false,
              interval: 0,
              textStyle: {
                color: '#666666',
                fontSize: 10
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#E7E7E7',
              }
            },
            data: ['1月', '2月', '3月']
          },
          yAxis: {
            type: 'value',
            splitNumber: 4,
            axisLabel: {
              fontSize: 8,
            },
            splitLine: {
              lineStyle: {
                color: '#E7E7E7',
              }
            }
          },
          series: [
            {
              data: [
                {
                  name: '1月',
                  value: 82,
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#0aede3'
                    },
                      {
                        offset: 1,
                        color: '#0aede300'
                      }
                    ])
                  },
                },
                {
                  name: '2月',
                  value: 77,
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#FDB36A'
                    },
                      {
                        offset: 1,
                        color: '#FDB36A00'
                      }
                    ])
                  },
                },
                {
                  name: '3月',
                  value: 77,
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#9E87FF'
                    },
                      {
                        offset: 1,
                        color: '#9E87FF00'
                      }
                    ])
                  },
                },
              ],
              type: 'bar',
              barWidth: '16px',
              label: {
                show: true,
                position: 'top',
                color: '#666',
                fontSize: 10
              },
            }]
        }
        myChart5.setOption(option5);
      }
		}
	}
</script>

<style lang="scss">
* {
  box-sizing: border-box;
}
.page {
  overflow-y: auto;
  padding: 0 16px;
  .card {
    //rgb(0 3 72 / 10%)
    box-shadow: 0px 5px 28px 0px rgba(0, 3, 72, 0.1);
  }
  .page-header {
    background-image: url("/static/bg0.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 400px;
  }
  > * {
    position: relative;
    z-index: 1;
  }
  .to-button {
    background: linear-gradient(180deg, #f80c2f 0%, #fd9d9d 100%);
    text-align: center;
    line-height: 48px;
    border-radius: 24px;
    color: #ffffff;
    font-size: 22px;
  }
  .top-rank-wrapper {
    border-radius: 12px;
    margin-bottom: 12px;
    background-color: #ffffff;
    margin-top: 20px;
    padding-top: 14px;
    overflow: hidden;
    .page-title {
      line-height: 50px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #f80c2f;
    }
  }
  .top-rank {
    background-color: #ffffff;
    padding: 12px;
    position: relative;
    .top-rank-left {
      position: relative;
      width: 150px;
      height: 150px;
      .rankChart-desc {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 12px;
        color: #f80c2f;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .rankChart-name {
          font-size: 14px;
          color: #f80c2f;
        }
        .rankChart-value {
          width: 100%;
          color: #f80c2f;
          display: flex;
          justify-content: center;
          .value {
            font-size: 24px;
            line-height: 28px;
            font-weight: bold;
          }
          .unit {
            font-size: 12px;
            color: #f80c2f;
            margin-left: 2px;
            line-height: 38px;
          }
        }
        .rankChart-text {
          font-size: 10px;
          color: #999999;
          margin-top: -6px;
        }
      }
    }
    .top-rank-right {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      padding: 0 20px;
      .top-rank-item {
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;
        .top-rank-name-wrapper {
          display: flex;
          align-items: center;
          margin-bottom: 6px;
          img {
            width: 24px;
            height: 24px;
            margin-right: 4px;
          }
          .high-light-text {
            color: #f80c2f;
            font-size: 24px;
            font-weight: bold;
          }
        }
        .top-rank-bar {
          width: 100%;
          height: 8px;
          background-color: #f0f0f0;
          border-radius: 12px;
          .top-rank-bar-content {
            height: 100%;
            border-radius: 12px;
            background-color: #f80c2f;
          }
        }
      }
    }
    .rank-box-chart {
      width: 100%;
      height: 100%;
    }
  }
  .linear-red {
    background: linear-gradient(90deg, #f80c2f 0%, #fd9d9d 100%);
  }
  .linear-green {
    background: linear-gradient(90deg, rgb(62,202,115) 0%, #17f3a7 100%);
  }
  // 渐变色 f25551 上下渐变红色
  //background: linear-gradient(180deg, #f25551 0%, #fd9d9d 100%);
  background: #F5F6FA;
  height: 100%;
  // 渐变色 浅绿色 17f3a7
  .asign {
    padding: 12px;
    border-radius: 12px;
    background-color: #ffffff;
    margin: 12px 0;
    .asign-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      .asign-title {
        font-size: 18px;
        font-weight: bold;
        color: rgb(40,54,57);
        padding: 4px 0 8px 0;
        text-align: center;
        display: flex;
        align-items: center;
        img {
          width: 18px;
          margin-right: 4px;
        }
      }
      .asign-desc {
        color: #0aede3;
        display: flex;
        align-items: center;
        img {
          margin-right: 4px;
          width: 24px;
          height: 24px;
        }
      }
    }
    .asign-body {
      display: flex;
      justify-content: space-between;
      .asign-wrapper {
        flex: 1;
        padding: 6px;
        .asign-box {
          padding:6px 12px;
          border-radius: 12px;
          width: 100%;
          height: 300px;
          background-color: rgb(245,249,252);
          .asign-box-title {
            font-size: 16px;
            font-weight: bold;
            color: rgb(40,54,57);
            text-align: center;
            margin-bottom: 6px;
          }
          .asign-bar-box {
            display: flex;
            align-items: center;
            margin: 16px 0;
            .asign-bar-name {
              width: 60px;
              font-size: 14px;
              font-weight: bold;
              color: rgb(40,54,57);
              text-align: left;
            }
            .asign-bar-content {
              flex-grow: 1;
              position: relative;
              height: 22px;
              .asign-bar-item {
                border-radius: 11px;
                padding: 0 10px;
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                text-align: right;
                line-height: 22px;
                color: #ffffff;
                font-size: 12px;
                width: 0;
                transition: all 0.5s;
              }
            }
          }
        }
        .asign-tips {
          font-size: 14px;
          line-height: 16px;
          font-weight: bold;
          color: rgb(40,54,57);
          padding-top: 10px;
          border-top: 1px solid #f0f0f0;

        }
      }
    }
  }
  .item-desc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius: 12px;
    background-color: #ffffff;
    margin: 12px 0;
    .logo {
      width: 45px;
      height: 45px;
    }
    .arrow {
      width: 12px;
      height: 16px;
    }
    .item-desc-content {
      flex-grow: 1;
      padding: 0 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .item-desc-name {
        font-size: 14px;
        font-weight: bold;
        color: #333333;

      }
      .item-desc-desc {
        font-size: 10px;
        color: #999999;
      }
    }
  }
  .static-bottom-wrapper {
    padding: 12px;
    border-radius: 12px;
    background-color: #ffffff;
    margin: 12px 0;
    .static-bottom-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

    }
    .static-bottom-chart {
      height: 150px;
      width: 100%;
    }
  }
  .static-top-wrapper {
    margin: 12px 0;
    padding: 12px;
    border-radius: 12px;
    background-color: #ffffff;
    .static-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      .static-item {
        width: 33%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top: 12px;
        .charts-box {
          width: 100%;
          height: 80px !important;
        }
      }
      .static-desc {
        .static-title {
          font-size: 12px;
          font-weight: bold;
          color: #999999;
          text-align: center;
        }
      }
    }
  }
  .rank-title {
    font-size: 18px;
    font-weight: bold;
    color: #f80c2f;
    padding: 4px 0 8px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      margin-right: 6px;
      width: 18px;
    }
  }
  .rank-desc {
    font-size: 14px;
    color: #999999;
  }
  .rank-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius:6px;
    background-color: #ffffff;
    .rank-box {
      width: 49%;
    }
    .rank-table {
      display: flex;
      flex-direction: column;
      .rank-table-list {
        border: 1px solid rgba(253, 157, 157, 0.53);
        border-top: none;
      }
      .rank-table-header {
        display: flex;
        align-items: center;
        height: 24px;
        line-height: 24px;
        background: linear-gradient(90deg, #f80c2f 0%, #fd9d9d 100%);
        color: #ffffff;
        font-size: 10px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        .rank-table-cell {
          padding: 0 6px;
          text-align: center;
        }

        .cell1 {
          width: 45px;
          padding: 0;
          text-align: center;
          justify-content: center;
        }

        .cell2 {
          flex-grow: 1;
          text-align: left;
        }

        .cell3 {
          flex-shrink: 0;
          text-align: right;
        }
      }
      .rank-table-body {
        display: flex;
        align-items: center;
        height: 30px;
        border-bottom: 1px solid #f0f0f0;
        .rank-table-cell {
          padding: 0 6px;
          color: #333333;
          display: flex;
          align-items: center;
          font-size: 10px;
          .avatar {
            width: 18px;
            height: 18px;
            overflow: hidden;
            border-radius: 50%;
            margin-right: 4px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .cell1 {
          width: 45px;
          padding: 0;
          text-align: center;
          justify-content: center;
        }

        .cell2 {
          flex-grow: 1;
          text-align: left;
        }

        .cell3 {
          flex-shrink: 0;
          text-align: right;
          justify-content: flex-end;
        }
      }
      .rank-table-body:last-of-type {
        border-bottom: none;
      }
    }
  }
}
</style>
